<template>
	<view>
		<!--基础信息-->
		<view class="btName">基础信息</view>
<!-- 		<view @click="pickerSelectFun('客户性质')" class="flex-white-plr26 ptb20 mt32 bdb_f5">
			<text class="mr26">客户性质<text class="redXingh">*</text></text>
			<view :class="ecotype ? '' : 'cBlack'">
				{{ecotype ? ecotype : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view> -->
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">
				<text>客户名称</text>
				<text class="redXingh">*</text>
			</text>
			<u-input v-model="name" placeholder="请输入客户名称" />
		</view>
		<view v-if="ecotype != '个人客户'" class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">
				<text>联系人</text>
				<text class="redXingh">*</text>
			</text>
			<u-input v-model="linkman" placeholder="请输入客户联系人" />
		</view>
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">联系方式
				<text class="redXingh">*</text>
			</text>
			<u-input v-model="mobile" placeholder="请输入联系方式" />
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5" @click="chooseAddrFun">
			<text class="mr26">地址</text>
			<u-input v-model="address" placeholder="请输入联系方式" />
		</view>
		<view @click="pickerSelectFun('客户来源')" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">客户来源
				<text class="redXingh">*</text>
			</text>
			<view :class="source ? '' : 'cBlack'">
				{{source ? source : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
<!-- 		<view @click="pickerShowFun('地区')" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">地区</text>
			<view :class="region ? '' : 'cBlack'">
				{{region ? region : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view> -->
		<!-- <view @click="pickerSelectFun('客户状态')" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">客户状态</text>
			<view :class="customerstatus ? '' : 'cBlack'">
				{{customerstatus ? customerstatus : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view> -->
		<view @click="pickerSelectFun('客户阶段')" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">客户阶段</text>
			<view :class="salestage ? '' : 'cBlack'">
				{{salestage ? salestage : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<view @click="pickerSelectFun('客户分级')" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">客户分级</text>
			<view :class="level ? '' : 'cBlack'">
				{{level ? level : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<view @click="pickerSelectFun('客户行业')" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">客户行业</text>
			<view :class="industry ? '' : 'cBlack'">
				{{industry ? industry : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<!--关联信息-->
		<!-- <view class="btName">关联信息</view>
		<view class="flex-white-plr26 ptb20 bdb_f5 mt32">
			<text class="mr26">添加联系人</text>
			<view :class="linkman ? '' : 'cBlack'">
				{{linkman ? linkman : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view> -->
		
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">受理部门</text>
			<view class="ownerdept">
				<uni-data-picker :localdata="dept_list_items" popup-title="请选部门" @change="onchange" @nodeclick="onnodeclick">
				</uni-data-picker>
			</view>
		</view>
		
		<u-picker :params="pickerParams" :safe-area-inset-bottom="true" end-year="2100" v-model="pickerShow"
			@confirm="pickerConfirmFun" :mode="pickerMode" :default-time="birthday"></u-picker>
			
		<u-select v-model="selectShow" :list="selectList" @confirm="selectConfirmFun"></u-select>
		<!--扩展信息-->
		<view class="btName">扩展信息</view>
<!-- 		<view class="flex-white-plr26 ptb20 bdb_f5 mt32">
			<text class="mr26">重要程度</text>
			<u-rate :count="5" v-model="stars" active-color="#ffaa00" size="36"></u-rate>
		</view> -->
<!-- 		<view @click="pickerSelectFun('客户类型')" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">客户类型</text>
			<view :class="type ? '' : 'cBlack'">
				{{type ? type : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view> -->
<!-- 		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">客户官网</text>
			<u-input v-model="guanWang" placeholder="请输入" />
		</view> -->
<!-- 		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">客户简介</text>
			<u-input v-model="jianJie" placeholder="请输入" />
		</view> -->
		<view class="flex-white-plr26 ptb20 mt32">
			<u-input v-model="remark" placeholder="备注" maxlength="500" placeholderStyle="color: #303133;" type="textarea" />
		</view>
		<!-- <view class="btName">系统信息</view>
		<view class="flex-white-plr26 ptb20 mt32 bdb_f5">
			<text class="mr26">负责人</text>
			<view  :class="fuZeRen ? '' : 'cBlack'">
				{{fuZeRen ? fuZeRen : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">协同人</text>
			<view :class="xtRen ? '' : 'cBlack'">
				{{xtRen ? xtRen : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view> -->
		<!--提交按钮-->
		<view class="submitView">
			<u-button type="primary" class="submitBtn" :ripple="true" ripple-bg-color="#909399" @click="submitBtn">
				{{pageType =='' ? '提交' : '保存'}}</u-button>
		</view>
	</view>
</template>

<script>
	let that = '';
	import {
		apiCstDict,
		apiCustomer
	} from '@/api/crm.js'
	import {
		apiSysDept
	} from '@/api/admin.js'
	export default {
		data() {
			return {
				xsName: '',
				name: '',
				mobile: '',
				company: '',
				position: '',
				weChat: '',
				mailbox: '',
				radioList: [{
						name: '男'
					},
					{
						name: '女'
					}
				],
				gender: '男',
				birthday: '',
				region: '',
				remark: '',
				pickerParams: {},
				pickerShow: false,
				pickerMode: 'time',
				selectShow: false,
				selectList: [],
				selectType: '',
				province: '',
				city: '',
				area: '',
				address: '',
				latitude: '',
				longitude: '',
				customerstatus: '潜在客户',
				salestage: '初步接洽',
				owner_dept_id:'',
				owner_user_id: uni.$userInfo.id,
				fuZeRen: uni.$userInfo.realname,
				xtRen: '',
				linkman: '',
				type: '',
				ecotype: '企业客户',
				level: '',
				industry: '',
				stars: 0,
				source: '公司资源',
				guanWang: '',
				jianJie: '',
				pageType: '',
				xgInfoObj: {},
				isAdd: 0,
				fkId: '',
				zhuanWeiClientId: '',
				dept_list_items: [],
				cstDict:''//所有字典
			}
		},
		onLoad(e) {
			that = this;
			if (e.type == 'update' || e.type == 'zhuanClient') {
				that.setDataFun();
				that.pageType = e.type;
				if (e.type == 'update') {
					uni.setNavigationBarTitle({
						title: '修改客户信息'
					})
				} else {
					uni.setNavigationBarTitle({
						title: '线索转为客户'
					})
				}
			}
			
			//载入字典
			let reqData = {
				action: 'get_list',
				params: {
					
				}
			}
			apiCstDict(reqData)
				.then(res => {
					let dictArr = res.data;
					let newArr=[];
					for(var key in dictArr){
						let rowData=[];
						for (var i = 0; i < dictArr[key].length; i++) {
							rowData.push({
								label: dictArr[key][i].name,
								value:dictArr[key][i].id
							})
						}
						newArr[key]=rowData;
					}
					that.cstDict=newArr;
				});

			
			that.getSysDept();

			if (e.isAdd) {
				that.isAdd = e.isAdd;
				if (uni.$addInfo) {
					that.linkman = uni.$addInfo.linkman;
					that.mobile = uni.$addInfo.mobile;
					that.name = uni.$addInfo.name;
					that.region = uni.$addInfo.region || '';
					that.address = uni.$addInfo.address || '';
					that.latitude = uni.$addInfo.latitude || '';
					that.longitude = uni.$addInfo.longitude || '';
					if (that.region) {
						let regionArr = (that.region).split(" ");
						that.province = regionArr[0];
						that.city = regionArr[1];
						that.area = regionArr[2];
					}
					if (uni.$addInfo.fkId) {
						that.fkId = uni.$addInfo.fkId;
					}
				}
			}
		},
		methods: {
			// 单选框
			radioGroupChange(e) {
				that.gender = e;
			},
			onchange(e) {
				const value = e.detail.value
			},
			onnodeclick(node) {
				console.log('这是点击')
				console.log(node)
				that.owner_dept_id=node.value
			},
			//下拉选择框架
			pickerSelectFun: function(str) {
				if (str == '客户状态') {
					that.selectList = that.cstDict.customerstatus;
				} else if (str == '客户阶段') {
					that.selectList = that.cstDict.salestage;
				} else if (str == '客户类型') {
					that.selectList = [{
							value: 0,
							label: '最终客户'
						},
						{
							value: 1,
							label: '渠道客户'
						},
						{
							value: 2,
							label: '竞争对手'
						}
					]
				} else if (str == '客户性质') {
					that.selectList = that.cstDict.ecotype
				} else if (str == '客户分级') {
					that.selectList =that.cstDict.level
				} else if (str == '客户行业') {
					that.selectList = that.cstDict.industry
				} else if (str == '客户来源') {
					that.selectList = that.cstDict.source
				}
				that.selectShow = true;
				that.selectType = str;
			},
			selectConfirmFun: function(e) {
				let str = e[0].label;
				if (that.selectType == '客户状态') {
					that.customerstatus = str;
				} else if (that.selectType == '客户阶段') {
					that.salestage = str;
				} else if (that.selectType == '客户类型') {
					that.type = str;
				} else if (that.selectType == '客户性质') {
					that.ecotype = str;
				} else if (that.selectType == '客户分级') {
					that.level = str;
				} else if (that.selectType == '客户行业') {
					that.industry = str;
				} else if (that.selectType == '客户来源') {
					that.source = str;
				}
			},
			// 展示选择器
			pickerShowFun: function(str) {
				if (str == '生日') {
					that.pickerMode = 'time';
					that.pickerParams = {
						year: true,
						month: true,
						day: true
					};
				} else if (str == '地区') {
					that.pickerMode = 'region';
					that.pickerParams = {
						province: true,
						city: true,
						area: true
					};
				} else if (str == '客户阶段') {
					that.pickerMode = 'selector';

				}
				that.pickerShow = true;
			},
			// 点击确定按钮，返回当前选择的值
			pickerConfirmFun: function(e) {
				if (that.pickerMode == 'time') {
					that.birthday = e.year + '-' + e.month + '-' + e.day
				} else {
					that.province = e.province.label;
					that.city = e.city.label;
					that.area = e.area.label;
					that.region = that.province + ' ' + that.city + ' ' + that.area;
				}
			},
			// 选择定位地点
			chooseAddrFun: function() {
				uni.chooseLocation({
					success: function(res) {
						that.address = res.address;
						that.latitude = res.latitude;
						that.longitude = res.longitude;
					}
				});
			},
			// 提交按钮
			submitBtn: function() {
				if (that.name == '') {
					uni.showModal({
						title: '提示',
						content: '客户名称不能为空，请输入！',
						showCancel: false
					})
					return
				}
				if (that.ecotype != '个人客户' && that.linkman == '') {
					uni.showModal({
						title: '提示',
						content: '客户联系人不能为空，请输入！',
						showCancel: false
					})
					return
				}
				if (that.mobile == '') {
					uni.showModal({
						title: '提示',
						content: '客户联系方式不能为空，请输入！',
						showCancel: false
					})
					return
				}
				//请求参数
				let reqObj = {
					req: {
						name: that.name,
						mobile: that.mobile,
						region: that.region,
						address: that.address,
						//latitude: that.latitude,
						//longitude: that.longitude,
						customerstatus: that.customerstatus,
						salestage: that.salestage,
						linkman: that.linkman,
						//type: that.type,
						ecotype: that.ecotype,
						level: that.level,
						industry: that.industry,
						stars: that.stars,
						source: that.source,
						remark: that.remark,
						owner_user_id: that.owner_user_id,
						create_user_id: that.owner_user_id
					}
				}
				let action = 'add';
				if (that.pageType == 'update') {
					action = 'update'
					reqObj.req.id = that.xgInfoObj.id;
					uni.showLoading({
						title: '修改中...'
					})
				} else if (that.pageType == 'zhuanClient') {
					let obj = reqObj.req;
					let time = new Date().getTime()
					obj.recently_date = '';
					obj.genjin_date = '';
					obj.isDelete = 0;
					obj.status = 1;
					if (obj.next_gjDate) {
						if (obj.next_gjDate < time) {
							that.$confirm('下次联系时间不能小于当前时间，请修改!', '提示', {
								confirmButtonText: '确定',
								type: 'warning',
								showCancelButton: false
							})
							return
						}
						obj.awaitFollowUp = 1;
					} else {
						obj.awaitFollowUp = 0;
					}
					obj.create_user_id = uni.$userInfo.id;
					obj.owner_user_id = uni.$userInfo.id;
					obj.threadId = that.xgInfoObj.id;
					reqObj.req = obj;
					uni.showLoading({
						title: '保存中...'
					})
				} else {
					reqObj.req.create_user_id = uni.$userInfo.id;
					reqObj.req.owner_user_id = uni.$userInfo.id;
					reqObj.req.openstatus = 1;//默认为私有
					if (that.fkId) {
						reqObj.req.fkId = that.fkId;
					}
					uni.showLoading({
						title: '提交中...'
					})
				}
				let reqData = {
					action: action,
					params: reqObj
				}
				apiCustomer(reqData)
					.then(res => {
						if (action == 'update') {
							uni.showToast({
								title: '客户修改成功',
								icon: 'none',
								duration: 888,
								mask: true
							})
							//that.addCzjlFun('update')
							setTimeout(() => {
								uni.navigateBack()
							}, 888)
						} else {
							if (that.pageType == 'zhuanClient') {
								that.zhuanWeiClientId = res.result.id;
							}
							uni.showToast({
								title: '客户新增成功',
								icon: 'none',
								duration: 1000,
								mask: true
							})
							//that.addCzjlFun('add') 操作记录
							let addObj = reqObj.req;
							//addObj._id = res.result.id;
							if (that.isAdd) {
								uni.$emit('addItemInListFun', addObj)
							}
							setTimeout(() => {
								addObj.cjRenName = uni.$userInfo.nickname;
								addObj.fuZeRenName = uni.$userInfo.nickname;
								uni.$khInfo = addObj;
								uni.redirectTo({
									url: './show'
								})
							}, 1000)
						}
					})
			},
			addCzjlFun: function(action, _id) {
				let czjlObj = {
					create_date: new Date().getTime(),
					czRen: uni.$userInfo._id,
					pageType: 'client'
				}
				if (action == 'update') {
					let xgInfoObj = that.xgInfoObj;
					czjlObj.dataId = xgInfoObj.id;
					czjlObj.type = '编辑'
					czjlObj.newUpdate = new Date().getTime();
					czjlObj.oldUpdate = xgInfoObj.update_date;
					let content = [];
					let str = '';
					if (that.remark != xgInfoObj.remark) {
						str = '修改 备注 ，由 "' + xgInfoObj.remark + '" 变更为 "' + that.remark + '"'
						content.push(str)
					}
					if (that.jianJie != xgInfoObj.jianJie) {
						str = '修改 客户简介 ，由 "' + xgInfoObj.jianJie + '" 变更为 "' + that.jianJie + '"'
						content.push(str)
					}
					if (that.guanWang != xgInfoObj.guanWang) {
						str = '修改 客户官网 ，由 "' + xgInfoObj.guanWang + '" 变更为 "' + that.guanWang + '"'
						content.push(str)
					}
					if (that.source != xgInfoObj.source) {
						str = '修改 客户来源 ，由 "' + xgInfoObj.source + '" 变更为 "' + that.source + '"'
						content.push(str)
					}
					if (that.stars != xgInfoObj.stars) {
						str = '修改 重要程度 ，由 "' + xgInfoObj.stars + '" 变更为 "' + that.stars + '"'
						content.push(str)
					}
					if (that.industry != xgInfoObj.industry) {
						str = '修改 客户行业 ，由 "' + xgInfoObj.industry + '" 变更为 "' + that.industry + '"'
						content.push(str)
					}
					if (that.level != xgInfoObj.level) {
						str = '修改 客户分级 ，由 "' + xgInfoObj.level + '" 变更为 "' + that.level + '"'
						content.push(str)
					}
					if (that.ecotype != xgInfoObj.ecotype) {
						str = '修改 客户性质 ，由 "' + xgInfoObj.ecotype + '" 变更为 "' + that.ecotype + '"'
						content.push(str)
					}
					if (that.type != xgInfoObj.type) {
						str = '修改 客户类型 ，由 "' + xgInfoObj.type + '" 变更为 "' + that.type + '"'
						content.push(str)
					}
					if (that.linkman != xgInfoObj.linkman) {
						str = '修改 联系人 ，由 "' + xgInfoObj.linkman + '" 变更为 "' + that.linkman + '"'
						content.push(str)
					}
					if (that.xtRen != xgInfoObj.xtRen) {
						str = '修改 协同人 ，由 "' + xgInfoObj.xtRen + '" 变更为 "' + that.xtRen + '"'
						content.push(str)
					}
					if (that.owner_user_id != xgInfoObj.owner_user_id) {
						str = '修改 负责人 ，由 "' + xgInfoObj.fuZeRen + '" 变更为 "' + that.fuZeRen + '"'
						content.push(str)
					}
					if (that.salestage != xgInfoObj.salestage) {
						str = '修改 客户阶段 ，由 "' + xgInfoObj.salestage + '" 变更为 "' + that.salestage + '"'
						content.push(str)
					}
					// if(that.customerstatus != xgInfoObj.customerstatus) {
					// 	str = '修改 客户状态 ，由 "' + xgInfoObj.customerstatus + '" 变更为 "' + that.customerstatus + '"'
					// 	content.push(str)
					// }
					if (that.address != xgInfoObj.address) {
						str = '修改 地址 ，由 "' + xgInfoObj.address + '" 变更为 "' + that.address + '"'
						content.push(str)
					}
					if (that.region != xgInfoObj.region) {
						str = '修改 地区 ，由 "' + xgInfoObj.region + '" 变更为 "' + that.region + '"'
						content.push(str)
					}
					if (that.mobile != xgInfoObj.mobile) {
						str = '修改 联系方式 ，由 "' + xgInfoObj.mobile + '" 变更为 "' + that.mobile + '"'
						content.push(str)
					}
					if (that.name != xgInfoObj.name) {
						str = '修改 客户名称 ，由 "' + xgInfoObj.name + '" 变更为 "' + that.name + '"'
						content.push(str)
					}
					czjlObj.content = content.reverse()
				} else {
					czjlObj.dataId = _id;
					czjlObj.type = '添加';
					if (that.pageType == 'zhuanClient' && that.zhuanWeiClientId) {
						that.setThreadDataFun();
					}
				}
				uni.$czjlApiAddFun(czjlObj);
			},
			setThreadDataFun: function() {
				let jjj = {
					action: 'update',
					params: {
						_id: that.xgInfoObj._id,
						req: {
							status: 2
						}
					}
				}
				threadApi(jjj)
					.then(res => {
						uni.$emit('threadListChangeFun');
					})
				let rrr = {
					action: 'zhuanClientCz',
					params: {
						dataId: that.xgInfoObj._id,
						clientId: that.zhuanWeiClientId
					}
				}
				czjlApi(rrr)
				let ooo = {
					action: 'zhuanClientGj',
					params: {
						dataId: that.xgInfoObj._id,
						clientId: that.zhuanWeiClientId
					}
				}
				threadGjApi(ooo)
			},
			// 初始化修改数据
			setDataFun: function() {
				that.xgInfoObj = uni.$khInfo;
				let obj = uni.$khInfo;
				console.log('获取数据');
				console.log(obj);
				console.log('获取数据：');
				that.name = obj.name;
				that.mobile = obj.mobile;
				that.region = obj.region;
				that.address = obj.address;
				that.latitude = obj.latitude;
				that.longitude = obj.longitude;
				// that.customerstatus = obj.customerstatus;
				that.salestage = obj.salestage;
				that.owner_user_id = obj.owner_user_id;
				that.linkman = obj.linkman;
				that.type = obj.type;
				that.ecotype = obj.ecotype;
				that.level = obj.level;
				that.industry = obj.industry;
				that.stars = obj.stars;
				that.source = obj.source;
				that.guanWang = obj.guanWang;
				that.remark = obj.remark;
				if (obj.region) {
					let regionArr = (obj.region).split(" ");
					that.province = regionArr[0];
					that.city = regionArr[1];
					that.area = regionArr[2];
				}
			},
			// 获得部门数据
			getSysDept: function() {
				let that = this;
				let reqData = {
					action: 'get_list_tree',
					params: {
			
					}
				}
				apiSysDept(reqData)
					.then(res => {
						console.log(res.data);
						let dataArr = res.data;
						let rowData = [];
						for (var key in dataArr) {
							rowData.push({
								name: dataArr[key].name,
								id: dataArr[key].id
							})
						}
						that.dept_list_items = res.data;
					});
			},
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
		padding-bottom: 260rpx;
	}

	.u-radio {
		width: 200rpx !important;
	}
	/deep/ .input-value-border{border:solid 1px #ffffff !important;}
</style>
